﻿<style type="text/css">
    #banner {
        position: relative;
        width: 234px;
        height: 178px;
        overflow: hidden;
    }

    #banner_list img {
        border: 0px;
        width: 234px;
        height: 178px;
    }

    #banner_bg {
        position: absolute;
        bottom: 0;
        /*background-color: #000;*/
        height: 30px;
        /*filter: Alpha(Opacity=30);
        opacity: 0.3;*/
        z-index: 1000;
        cursor: pointer;
        width: 478px;
    }

    #banner_info {
        position: absolute;
        bottom: 0;
        left: 5px;
        height: 22px;
        color: #fff;
        z-index: 1001;
        cursor: pointer;
    }

    #banner_text {
        position: absolute;
        width: 120px;
        z-index: 1002;
        right: 3px;
        bottom: 3px;
    }

    #banner ul {
        position: absolute;
        list-style-type: none;
        /*filter: Alpha(Opacity=80);
        opacity: 0.8;
        border: 1px solid #fff;*/
        z-index: 1002;
        margin: 0;
        padding: 0;
        bottom: 0px;
        right: 0px;
    }

        #banner ul li {
            padding: 0px 6px;
            float: left;
            display: block;
            color: #FFF;
            border: #e5eaff 1px solid;
            background: #6f4f67;
            cursor: pointer;
        }

            #banner ul li.on {
                background: #900;
            }

    #banner_list a {
        position: absolute;
    }
</style>
<script type="text/javascript">
    var t = n = 0, count;
    $(document).ready(function () {
        count = $("#banner_list a").length;
        $("#banner_list a:not(:first-child)").hide();
        //$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
        $("#banner_info").click(function () { window.open($("#banner_list a:first-child").attr('href'), "_blank") });
        $("#banner li").click(function () {
            var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
            n = i;
            if (i >= count) return;
            //$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
            $("#banner_info").unbind().click(function () { window.open($("#banner_list a").eq(i).attr('href'), "_blank") })
            $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
            document.getElementById("banner").style.background = "";
            $(this).toggleClass("on");
            $(this).siblings().removeAttr("class");
        });
        t = setInterval("showAuto()", 4000);
        $("#banner").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 4000); });
    })

    function showAuto() {
        n = n >= (count - 1) ? 0 : ++n;
        $("#banner li").eq(n).trigger('click');
    }
</script>
@model IList<ArticleInfo>
<div class="mod-market mod-market-v1" style="height: auto;">
    <div class="header">
        <div class="cell-header">
            <div class="market-dynamic" style="position:relative; width:98%;">
                <div class="market-info">
                </div>
                <div class="title" style="width:100%;">
                    @{ var partition = ViewBag.Partition as ArticlePartitionInfo;}
                    <a href="@Url.Action("Index", "CArticle")?aid=@partition.PartitionId" target="_blank">图片</a>
                    <a style=" float:right; font-weight:normal; font-size:12px;" href="@Url.Action("Index", "CArticle")?aid=@partition.PartitionId">更多&nbsp;></a>
                </div>
            </div>
        </div>
    </div>
    <div class="content" style="padding:2px;">
        <div id="banner">
            <div id="banner_bg"></div>
            <!--标题背景-->
            <div id="banner_info"></div>
            @{
                var count = Model.Count;
            }
            <!--标题-->
            <ul>
                @for (int i = 1; i <= count; i++)
                {
                    if (i == 1)
                    {
                    <li class="on">@i</li>
                    }
                    else
                    {
                    <li>@i</li>
                    }
                }
            </ul>
            <div id="banner_list">
                @foreach (var item in Model)
                {
                    <a href="@Url.Action("Detail", "CArticle")?aid=@item.ContentId" target="_blank">
                        <img src="@item.ImgUrl" title="@item.Title" alt="@item.Title" /></a>
                }
            </div>
        </div>
    </div>
</div>
